<template>
  <u-navbar placeholder :autoBack="true" title="搜索"> </u-navbar>
  <div class="box">
    <div class="content">
      <div class="u_search">
        <u-search
          :show-action="true"
          actionText="搜索"
          :animation="true"
          @custom="search"
          @search="search"
        ></u-search>
      </div>
      <div class="msg">
        <!-- 第一行 -->
        <div class="sort">
          <div
            class="synthesis"
            v-for="(item, index) in synth"
            :key="index"
            :class="currentSort == index ? 'active' : 'inavtive'"
            @click="currentSort = index"
          >
            <text @click="off(index)">{{ item.name }}</text>
            <u-icon
              :name="item.img"
              size="20"
              @click="text(index)"
              color="#f9426b ? '#f9426b' : '#999'"
            ></u-icon>
          </div>
        </div>
        <u-popup class="popup" :show="showpopup" mode="right" @close="close">
          <view class="pop_box">
            <!-- 价格区间 -->
            <div class="one">
              <div class="one_top">
                <div>价格区间</div>
                <div class="ot_text">请输入价格区间</div>
              </div>
              <div class="one_input">
                <input
                  type="number"
                  maxlength="7"
                  v-model="minPrice"
                  placeholder-style=" color: #C0C0C0"
                  placeholder="最低价"
                  @blur="blur"
                />
                -
                <input
                  type="number"
                  maxlength="7"
                  v-model="maxPrice"
                  placeholder-style=" color: #C0C0C0"
                  placeholder="最高价"
                  @blur="blur"
                />
              </div>
            </div>
            <!-- 全部分类 -->
            <div class="two">
              <div>全部分类</div>
              <!-- 单选 -->
              <div class="radio">
                <div
                  class="radio_item"
                  v-for="(item, index) in radio"
                  :key="index"
                  :class="radioitem == index ? 'active' : 'inavtive'"
                  @click="radioitem = index"
                >
                  <div class="radio_name">{{ item.name }}</div>
                </div>
              </div>
            </div>
            <!-- 品牌 -->
            <div class="three">
              <div>品牌</div>
              <!-- 多选 -->
              <div class="radio">
                <div
                  class="radio_item"
                  v-for="(item, index) in check"
                  :key="index"
                  :class="[item.selected ? 'active' : '']"
                  @click="checkbox(index)"
                >
                  <div class="radio_name">{{ item.name }}</div>
                </div>
              </div>
            </div>
            <!-- 最后的按钮 -->
            <div class="btn">
              <button class="reset_btn" @click="reset(index)">重置</button>
              <button class="ok_btn" @click="ok(index)">确定</button>
            </div>
          </view>
        </u-popup>
        <view class="mask" v-show="show">
          <div
            class="mask_change"
            v-for="(item, index) in name"
            @click="changename(index)"
            :key="index"
          >
            <div>{{ item.name }}</div>
            <u-icon v-show="item.selected" name="checkbox-mark"></u-icon>
          </div>
        </view>
        <!-- 第二行 -->
        <div class="all_box">
          <div
            class="change"
            @click="changetext(index)"
            change
            v-for="(item, index) in change"
            :key="index"
          >
            <div>{{ item.text }}</div>
          </div>
        </div>
        <!-- 商品 -->
        <view class="list_content" v-show="showImg">
          <view
            class="item"
            v-for="(item, index) in list"
            :key="index"
            @click="inshop(item.url)"
          >
            <view class="img_box">
              <image class="item_img" :src="item.img" alt="" />
              <view class="introduce">
                {{ item.introduce }}
              </view>
            </view>
            <view class="item_content">
              <view class="title">
                {{ item.title }}
              </view>
              <view class="money">
                {{ item.newmoney }}
                <s class="s">{{ item.money }} </s>
              </view>
              <view class="goshop">
                <view>
                  <text class="font_color">{{ item.people }}</text
                  >{{ item.status }}
                </view>
                <image class="shop_img" :src="item.shop_img" alt="" />
              </view>
            </view>
          </view>
        </view>
        <!-- 商品列表 -->
        <div class="buy_box" v-show="!showImg">
          <div class="top" v-for="(item, index) in shoplist" :key="index">
            <div class="top_left">
              <image class="buy_img" :src="item.img" alt="" />
            </div>
            <div class="top_right">
              <div class="buy_title">
                {{ item.title }}
              </div>
              <div class="name_box">
                <div class="name">
                  <uni-icons color="#989CA1" type="staff" size="20">
                  </uni-icons>
                  推荐 {{ item.people }}
                </div>
                <div class="name">
                  <uni-icons color="#989CA1" type="eye" size="20"> </uni-icons>
                  浏览 {{ item.look }}
                </div>
              </div>
              <div class="last_box">
                <div class="last">￥{{ item.money }}</div>
                <div class="last_box">{{ item.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import input from "uview-plus/libs/config/props/input";
import { ref } from "vue";
// 更换图片
const minPrice = ref("最低价");
const maxPrice = ref("最高价");
const showImg = ref(true);
const show = ref(false);
const showpopup = ref(false);
const currentSort = ref(0);
const radioitem = ref();
const selectList = ref("");
const selectId = ref([]);
const xuanzhonglist = ref([]);
const changeok = (index) => {};
const blur = () => {
  console.log();
};
const ok = (index) => {
  showpopup.value = false;
  // console.log(radio.value[radioitem.value].name);
  console.log(selectId.value);
};
const reset = (index) => {
  minPrice.value = "最低价";
  maxPrice.value = "最高价";
  for (var i = 0; i < check.value.length; i++) {
    check.value[i].selected = false;
  }
  xuanzhonglist.value = [];

  radioitem.value = -1;
};
const checkbox = (index) => {
  console.log(index);
  check.value[index].selected = !check.value[index].selected;
  if (check.value[index].selected) {
    if (
      check.value.findIndex(
        (item) => (item.selected == check.value[index].name) == -1
      )
    ) {
      xuanzhonglist.value.push(check.value[index].name);
    }
  } else {
    let xuanzhongindex = xuanzhonglist.value.findIndex(
      (item) => item == check.value[index].name
    );
    xuanzhonglist.value.splice(xuanzhongindex, 1);
  }
  console.log(xuanzhonglist.value);
};

const close = () => {
  showpopup.value = false;
};
const changename = (index) => {
  for (var i = 0; i < name.value.length; i++) {
    name.value[i].selected = false;
  }
  if (name.value[index].selected === false) {
    name.value[index].selected = true;
  } else {
    name.value[index].selected = false;
  }
  synth.value[0].name = name.value[index].name;
  console.log(name.value[index].name);
};
const off = (index) => {
  if (index === 3) {
    showpopup.value = !showpopup.value;
  }
  show.value = false;
  synth.value[0].img = "arrow-down";
};
const text = (index) => {
  if (index === 0) {
    if (synth.value[0].img == "arrow-down") {
      show.value = !show.value;
      synth.value[index].img = "arrow-up";
    } else {
      show.value = !show.value;
      synth.value[index].img = "arrow-down";
    }
  } else if (index === 2) {
    if (synth.value[2].img == "grid") {
      showImg.value = false;
      synth.value[2].img = "list-dot";
    } else {
      showImg.value = true;
      synth.value[2].img = "grid";
    }
  } else {
    show.value = false;
    synth.value[2].img = "grid";
    synth.value[0].img = "arrow-down";
  }
};
const changetext = (index) => {
  uni.showToast({
    title: change.value[index].text,
  });
};
const search = (value) => {
  // 把value放进列表渲染里
  list.value.push({
    text: value,
  });
};
// 删除
const del = () => {
  list.value = [];
};
const radio = ref([
  {
    name: "电子",
  },
  {
    name: "珠宝",
  },
  {
    name: "百货",
  },
  {
    name: "视频",
  },
  {
    name: "衣服",
  },
]);
const check = ref([
  {
    name: "apple",
    selected: false,
  },
  {
    name: "伊利",
    selected: false,
  },
  {
    name: "李宁",
    selected: false,
  },
  {
    name: "安踏",
    selected: false,
  },
  {
    name: "小米",
    selected: false,
  },
  {
    name: "华为",
    selected: false,
  },
  {
    name: "耐克",
    selected: false,
  },
]);
const name = ref([
  {
    name: "综合",
    selected: true,
  },
  {
    name: "价格降序",
    selected: false,
  },
  {
    name: "价格升序",
    selected: false,
  },
]);
const synth = ref([
  {
    name: "综合",
    img: "arrow-down",
  },
  {
    name: "销量",
  },
  {
    img: "grid",
  },
  {
    name: "筛选",
  },
]);
const change = ref([
  {
    text: "全部",
  },
  {
    text: "新品",
  },
  {
    text: "推荐",
  },
  {
    text: "热门",
  },
]);
const list = [
  {
    url: "/pages/shop/shop",
    img: "http://zyqny.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    introduce: "手机手机手机手机手机手机手机手机手机手机",
    title: "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍",
    newmoney: "￥520",
    money: "￥1314",
    people: "92人",
    status: "付款",
    shop_img:
      "http://zyqny.zmycode.top/%E8%B4%AD%E7%89%A9%E8%BD%A6%E7%A9%BA.png",
  },
  {
    img: "http://zyqny.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    introduce: "手机手机手机手机手机手机手机手机手机手机",
    title: "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍",
    newmoney: "￥520",
    money: "￥1314",
    people: "92人",
    status: "付款",
    shop_img:
      "http://zyqny.zmycode.top/%E8%B4%AD%E7%89%A9%E8%BD%A6%E7%A9%BA.png",
  },
  {
    img: "http://zyqny.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    introduce: "手机手机手机手机手机手机手机手机手机手机",
    title: "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍",
    newmoney: "￥520",
    money: "￥1314",
    people: "92人",
    status: "付款",
    shop_img:
      "http://zyqny.zmycode.top/%E8%B4%AD%E7%89%A9%E8%BD%A6%E7%A9%BA.png",
  },
];
const shoplist = ref([
  {
    img: "http://zyqny.zmycode.top/1698661593944.jpg",
    title: "Apple iPhone 14(A2884)128GB星光色支持移动联通电信5G双卡双待手机",
    people: 1000,
    look: 10000,
    money: 1000,
    time: "2023-07-22 22:49",
  },
  {
    img: "http://zyqny.zmycode.top/1698661593944.jpg",
    title: "Apple iPhone 14(A2884)128GB星光色支持移动联通电信5G双卡双待手机",
    people: 1000,
    look: 10000,
    money: 1000,
    time: "2023-07-22 22:49",
  },
  {
    img: "http://zyqny.zmycode.top/1698661593944.jpg",
    title: "Apple iPhone 14(A2884)128GB星光色支持移动联通电信5G双卡双待手机",
    people: 1000,
    look: 10000,
    money: 1000,
    time: "2023-07-22 22:49",
  },
]);
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  .content {
    padding-top: 40rpx;
    .u_search {
      width: 90%;
      margin: 0 auto;
    }
    .msg {
      position: relative;

      .sort,
      .all_box {
        padding: 0rpx 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 30rpx 0;
        .synthesis {
          font-size: 30rpx;
          width: 40%;
          justify-content: center;

          // border: 1px solid #000;
          display: flex;
          align-items: center;
          &.active {
            color: #f9426b;
          }
        }
      }
      .mask {
        position: absolute;
        // bottom: 0;
        z-index: 999;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        display: grid;
        gap: 20rpx 0;
        width: 100%;
        background-color: #fff;
        .mask_change {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
      .popup {
        .pop_box {
          width: 80vw;

          padding: 0 20rpx;
          box-sizing: border-box;
          .one {
            padding-top: 100rpx;
            box-sizing: border-box;
            .one_top {
              font-size: 28rpx;
              width: 100%;
              justify-content: space-between;
              display: flex;
              align-items: center;
              .ot_text {
                color: #f9426b;
              }
            }
            .one_input {
              margin: 60rpx 0;
              display: flex;
              gap: 0rpx 20rpx;
              align-items: center;
              input {
                padding: 10rpx 0;
                background-color: #6c6c6c;
                border-radius: 50rpx;
                text-align: center;
                background-color: #f7f7f7;
                color: #333;
              }
            }
          }
          .two {
            .radio {
              margin-top: 40rpx;
              display: flex;
              gap: 20rpx;
              flex-wrap: wrap;
              align-items: center;
              .radio_item {
                width: 30%;
                border-radius: 50rpx;
                padding: 10rpx 0;
                text-align: center;
                color: #333;
                border: 1px solid #cbcbcb;
                &.active {
                  color: #f9426b;
                  border: 1px solid #f9426b;
                  background-color: #ffe8e8;
                }
              }
            }
          }
          .three {
            margin-top: 40rpx;
            .radio {
              margin-top: 40rpx;
              display: flex;
              gap: 20rpx;
              flex-wrap: wrap;
              align-items: center;
              .radio_item {
                width: 30%;
                border-radius: 50rpx;
                padding: 10rpx 0;
                text-align: center;
                color: #333;
                border: 1px solid #cbcbcb;
                &.active {
                  color: #f9426b;
                  border: 1px solid #f9426b;
                  background-color: #ffe8e8;
                }
              }
            }
          }
          .btn {
            position: fixed;
            bottom: 20rpx;
            display: flex;
            gap: 0rpx 30rpx;
            align-items: center;
            .reset_btn {
              line-height: 60rpx;
              padding: 0rpx 100rpx;
              box-sizing: border-box;
              border: 1px solid #f9426b;
              border-radius: 60rpx;
              background-color: #fff;
              color: #f9436b;
              font-size: 32rpx;
              uni-button:after {
                border: unset;
              }
            }
            .ok_btn {
              line-height: 60rpx;
              padding: 0rpx 100rpx;
              box-sizing: border-box;
              border: 1px solid #f9426b;
              border-radius: 60rpx;
              background-color: #f9426b;
              color: #fff;
              font-size: 32rpx;
              uni-button:after {
                border: unset;
              }
            }
          }
        }
      }

      .all_box {
        // padding: 0;
        box-sizing: border-box;
        .change {
          color: #333;
          border: 1px solid rgb(221, 221, 221);
          border-radius: 50rpx;
          padding: 10rpx 40rpx;
          box-sizing: border-box;
        }
      }
      .list_content {
        width: 94%;
        margin: 0 auto;
        margin-top: 30rpx;
        display: flex;
        grid-gap: 20rpx 0;
        justify-content: space-between;
        flex-wrap: wrap;
        .item {
          width: 48.5%;
          .img_box {
            border-radius: 10rpx;
            overflow: hidden;
            position: relative;
            .item_img {
              width: 100%;
              height: 340rpx;
            }
            .introduce {
              font-size: 28rpx;
              position: absolute;
              bottom: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              color: #fff;
              padding: 4rpx 10rpx;
              box-sizing: border-box;
              background-color: rgba(0, 0, 0, 0.4);
            }
          }
          .item_content {
            display: grid;
            grid-gap: 20rpx 0;
            padding: 20rpx;
            background-color: #fff;
            box-sizing: border-box;
            border-radius: 10rpx;
            .title {
              font-size: 30rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .money {
              display: flex;
              grid-gap: 0rpx 20rpx;
              align-items: center;
              color: #fa436a;
              .s {
                font-size: 26rpx;
                color: #999;
              }
            }
            .goshop {
              font-size: 26rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .font_color {
                color: #fa436a;
              }
              .shop_img {
                width: 40rpx;
                height: 40rpx;
              }
            }
          }
        }
      }
      .buy_box {
        display: grid;
        gap: 20rpx 0;
        .top {
          box-shadow: 0px 2px 10px 5px #e8e8e8;

          border-radius: 10rpx;
          padding: 20rpx 30rpx;
          box-sizing: border-box;
          background-color: #fff;
          display: flex;
          align-items: center;
          .top_left {
            width: 30%;
            .buy_img {
              width: 160rpx;
              height: 160rpx;
            }
          }
          .top_right {
            display: grid;
            gap: 10rpx 0;
            width: 70%;
            .buy_title {
              font-size: 28rpx;
            }
            .name_box {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .name {
                font-size: 28rpx;
                display: flex;
                align-items: center;
              }
            }
            .last_box {
              font-size: 28rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #6c6c6c;
              .last {
                font-size: 36rpx;
                color: #f9426b;
              }
            }
          }
        }
      }
    }
  }
}
</style>
